<script lang="ts" setup>
import type {
  OnActionClickParams,
  VxeGridListeners,
  VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { UserApi } from '#/api/index';

import { reactive, ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import { ElButton } from 'element-plus';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getUserPageList } from '#/api/index';
import { $t } from '#/locales';

import { useColumns, useGridFormSchema } from './data';
import DeptTree from './modules/dept-tree.vue';
import Form from './modules/form.vue';

const [Drawer, drawerApi] = useVbenDrawer({
  connectedComponent: Form,
  destroyOnClose: true,
});

const hasTopTableDropDownActions = ref(false);

const deptIdList = ref([]);

const gridEvents: VxeGridListeners<any> = {
  checkboxChange() {
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
  checkboxAll() {
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
    schema: useGridFormSchema(),
    submitOnChange: true,
  },
  gridOptions: {
    columns: useColumns(onActionClick),
    height: 'auto',
    keepSource: true,
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await getUserPageList({
            page: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          });
        },
      },
    },
    rowConfig: {
      keyField: 'id',
    },
    toolbarConfig: {
      custom: true,
      export: false,
      refresh: true,
      search: true,
      zoom: true,
    },
  } as VxeTableGridOptions<UserApi.UserListResult>,
  gridEvents,
});

function onActionClick(e: OnActionClickParams<UserApi.UserListResult>) {
  switch (e.code) {
    case 'delete': {
      break;
    }

    case 'edit': {
      break;
    }
    case 'view': {
      onView(e.row);
      break;
    }
  }
}

const onCheck = () => {
  gridApi.reload();
};

function onView(row: UserApi.UserListResult) {
  drawerApi.setData(row).open();
}

const colPageProps = reactive({
  leftCollapsedWidth: 5,
  leftCollapsible: true,
  leftMaxWidth: 50,
  leftMinWidth: 20,
  leftWidth: 30,
  resizable: true,
  rightWidth: 70,
  splitHandle: true,
  splitLine: true,
});
</script>
<template>
  <ColPage auto-content-height v-bind="colPageProps">
    <template #left="{ isCollapsed, expand }">
      <div v-if="isCollapsed" @click="expand">
        <Tooltip title="点击展开左侧">
          <Button shape="circle" type="primary">
            <template #icon>
              <Icon class="text-2xl" icon="ant-design:arrow-right" />
            </template>
          </Button>
        </Tooltip>
      </div>
      <div
        v-else
        :style="{ minWidth: '200px' }"
        class="border-border bg-card mr-2 h-full overflow-auto rounded-[var(--radius)] border p-2"
      >
        <DeptTree v-model:value="deptIdList" @check="onCheck" />
      </div>
    </template>

    <Grid :table-title="$t('xtgl.user.title')">
      <template #toolbar-tools>
        <ElButton type="primary">
          {{ $t('xtgl.user.add') }}
        </ElButton>
      </template>
    </Grid>
    <Drawer />
  </ColPage>
</template>
